<template>
	<view class="content">
		<u-action-sheet  :actions="actionList" @select="selectClick" @close="show = false" :closeOnClickOverlay="true"
			:closeOnClickAction="true" :show="show"></u-action-sheet>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
			<view class="section-1">
				<view class="section-body">
					<view class="list">
						<view class="item" v-for="item in list" :key="item.id">
							<view class="top">
								<view class="left">
									<view class="part">
										责任单位：{{item.company_name}}
									</view>
									<view class="part">
										责任人：{{item.duty_user_name}}
									</view>
									<view class="part">
										时间：{{item.sub_time.substring(0,10)}}
									</view>
								</view>
								<view class="right"  @click="showAction(item)">
									<view class="iconfont icon-caidan"></view>
								</view>
							</view>
							<view class="mid">
								<view class="label">问题描述：</view>
								<view class="textarea-body">{{item.content}}</view>
							</view>
							<view class="bottom">
								<view class="label" v-if="item.file_path">照片：</view>
								<u--image v-if="item.file_path" @click="previewImage(item.file_path)" mode="aspectFill"
									radius="14rpx" width="140rpx" height="140rpx"
									:src="item.file_path ? item.file_path.replace(/\\/g,'/') : ''"></u--image>
							</view>
							<view class="finish" v-if="item.state == 2">
								<image mode="aspectFit" src="../../../../../../src/imgs/todo-done.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		listApi,
		updateApi
	} from '@/api/zhengchu.js';
	export default {
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				list: [],
				show: false,
				curItem: {},
				project_id:'',
				actionList: [{
						name: '编辑',
					},
					{
						state: 3,
						name: '删除',
					},
					{
						state: 2,
						name: '标记完成',
					}
				],
			}
		},
		onNavigationBarButtonTap(res) { //添加按钮  点击跳转
			uni.navigateTo({
				url: "/pages/work/manager/construction/progress/zhengchuAdd/zhengchuAdd"
			})
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
			})
		},
		onShow(){
			this.mescroll.resetUpScroll();
		},
		onBackPress(event) {
			// console.log(event)
			// if (event.from === 'backbutton') {
			// uni.navigateBack()
			// }
			uni.navigateTo({
				url: "/pages/work/manager/construction/progress/index"
			})

			return true
		},
		methods: {
			async update(state) {
				const {
					data
				} = await updateApi({
					id: this.curItem.id,
					state
				});
				if (data.code === 1) {
					uni.showToast({
						title: '删除成功',
						duration: 1000,
						icon: 'success'
					});
					this.handleResetForm();
				} else {
					uni.showToast({
						title: '删除失败',
						duration: 1000,
						icon: 'error'
					});
				}

			},
			selectClick(item) {
				if (item.state) {
					this.update(item.state);
				} else {
					uni.navigateTo({
						url: "/pages/work/manager/construction/progress/zhengchuAdd/zhengchuAdd?id=" + this.curItem.id
					})
				}
			},
			showAction(item) {
				this.curItem = item;
				this.show = true;
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url],
				});
			},

			handleResetForm() {
				for (let key in this.form) {
					this.form[key] = '';
				}
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			handleSearch() {
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			async upCallback(page) {
				const {
					data
				} = await listApi({
					project_id: this.curProject.id,
					page: page.num,
					pageSize: this.pageSize,
				});
				if (data.code === 1 || data.code === 200) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.data;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.data.last_page;
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
					// this.list=curPageData
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage);
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen);
					}, 20);
				} else {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
			onLoad(e) {
				// console.log(e)
				uni.hideLoading();
    //             this.project_id=e.parmas
				// console.log(this.project_id,'2222')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.section-1 {
		width: 100%;
		background: #2e5efe;

		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
		}

		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 0 35rpx;
			padding-top: 40rpx;

			.item {
				width: 100%;
				border-radius: 30rpx;
				@include common-box-shadow;
				margin-bottom: 40rpx;
				box-sizing: border-box;
				padding: 30rpx 20rpx;
				position: relative;

				.top {
					width: 100%;
					@include clear;
					margin-bottom: 10rpx;

					.left {
						width: 480rpx;
						@include font-normal float: left;

						.part {
							width: 100%;
							line-height: 30rpx;
							margin-bottom: 10rpx;
						}
					}

					.right {
						text-align: right;
						width: calc(100% - 480rpx);
						color: #1534ce;
						float: left;

						.iconfont {
							font-weight: bold;
							font-size: 34rpx;
						}
					}
				}

				.mid {
					margin-bottom: 20rpx;

					.label {
						@include font-normal;
						margin-bottom: 10rpx;
					}

					.textarea-body {
						box-sizing: border-box;
						width: 100%;
						height: 150rpx;
						border: none;
						padding: 15rpx !important;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						font-size: 25rpx;
						border-radius: 15rpx;
						background-color: #ededed;
						color: #3b3c40;
						overflow: auto;
						word-wrap: break-word;
					}
				}

				.bottom {
					position: relative;
					width: 100%;
					font-size: 18rpx;
					color: #3b3c40;


					.label {
						@include font-normal;
						margin-bottom: 10rpx;
					}

					/deep/ .u-fade-enter-active {
						background-color: rgba(0, 0, 0, 0) !important;
					}
				}

				.finish {
					position: absolute;
					right: 100rpx;
					top: 30rpx;

					image {
						width: 134rpx;
						height: 134rpx;
					}
				}
			}
		}
	}
</style>
